<template>
	<view class="inputNickname">
		<uni-nav-bar left-icon="back" :status-bar="true" :fixed="true" :shadow="false" @clickLeft="handleBack">
			<view slot="default" class="common-headText">给自己取一个昵称</view>
		</uni-nav-bar>
		<view class="topArea">
			<image src="../../../static/login/nickName.png" style="width: 156upx;" mode="widthFix"></image>
			<text>你希望大家怎么称呼你呢？</text>
		</view>
		<view class="openMusic">
			<view class="inputs">
				<input type="text" placeholder="请输入昵称" v-model="registerParams.nickName" />
				<uni-icons
					v-show="registerParams.nickName"
					@click="registerParams.nickName = ''"
					style="transform: translateY(20%);"
					type="closeempty"
					color="#ccc"
					size="15"
				></uni-icons>
			</view>
			<commonBtn title="开启NoteMusic" :style="{ backgroundColor: !registerParams.nickName ? '#72bfc4' : '#07a0aa' }" @click="jumpToNext"></commonBtn>
		</view>
	</view>
</template>

<script>
import { register,initNickName } from '@/api/account.js';
export default {
	data() {
		return {
			registerParams: {
				nickName: '',
				phone: '',
				password: '',
				captcha: ''
			}
		};
	},
	onLoad(e) {
		this.registerParams.phone = e.phone;
		this.registerParams.password = e.password;
		this.registerParams.captcha = e.captcha;
	},
	watch: {
		'registerParams.nickName': {
			handler(newV) {
				setTimeout(() => {
					this.registerParams.nickName = newV.trim();
				});
			}
		}
	},
	methods: {
		jumpToNext() {
			console.log(this.registerParams);
			uni.showLoading();
			register(this.registerParams)
				.then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						initNickName({nickname:this.registerParams.nickName}).then(res=>{
							console.log(res);
							if(res.code == 200){
								uni.showToast({
									title: '注册成功',
									icon: 'none'
								});
								uni.navigateTo({
									url: '/pages/main/main'
								});
							}else{
								uni.showToast({
									title: res.msg || res.message,
									icon: 'none'
								});
							}
						})
					}
				})
				.catch(err => {
					uni.hideLoading();
					if (err.msg || err.message) {
						uni.showToast({
							title: err.msg || err.message,
							icon: 'none'
						});
					}
				});
		},
		handleBack() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss">
.inputNickname {
	/deep/.uni-navbar--border {
		border: none;
	}
	.topArea {
		width: 100%;
		height: 440upx;
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
		justify-content: space-between;
		align-items: center;
		padding-top: 12px;
		padding-bottom: 20px;
		box-sizing: border-box;
		> text {
			font-size: 16px;
		}
	}
	.openMusic {
		padding: 0 20px;
		.inputs {
			display: flex;
			align-items: center;
			width: 100%;
			height: 72rpx;
			border-bottom: 1px #ccc solid;
			padding-top: 22px;
			padding-right: 2px;
			margin-bottom: 22px;
			> input {
				flex: 1;
				height: 100%;
				font-size: 16px;
			}
		}
	}
}
</style>
